<template>
  <div class="order">
    <van-nav-bar title="订单详情" left-arrow fixed @click-left="$router.back()" />

    <div class="header">
        <img src="https://smart-shop.itheima.net/static/order/status/wait_deliver.png">
        <span>{{order.state_text}}</span>
    </div>

    <div class="user">
        <p>
            <span>{{order.address?.name}}</span>
            <span>{{order.address?.phone}}</span>
        </p>
        <p>{{order.address?.region.province+order.address?.region.city+order.address?.region.region+order.address?.detail}}</p>
    </div>

    <div class="goods">
        <div class="goods-item" v-for="goods in order.goods" :key="goods.goods_id" @click="$router.push(`/detail?goodsId=${goods.goods_id}`)">
            <div class="left">
                <img :src="goods.goods_image">
            </div>
            <div class="middle">
                <p>{{goods.goods_name}}</p>
            </div>
            <div class="right">
                <p>￥{{goods.goods_price}}</p>
                <p>x{{goods.total_num}}</p>
            </div>
        </div>
    </div>

    <div class="info">
        <p>
            <span>订单编号</span>
            <span>{{order.order_no}}</span>
        </p>
        <p>
            <span>下单时间</span>
            <span>{{order.pay_time}}</span>
        </p>
        <p>
            <span>买家留言</span>
            <span>{{order.buyer_remark?order.buyer_remark:'--'}}</span>
        </p>
    </div>

    <div class="money">
        <p>
            <span>订单金额</span>
            <span>￥{{order.total_price}}</span>
        </p>
        <p>
            <span>运费</span>
            <span>+￥{{order.express_price}}</span>
        </p>
        <p>
            <span>实付款</span>
            <span>￥{{order.order_price}}</span>
        </p>
    </div>

    <div class="handle">
        <span v-if="order.state_text==='待取消'">取消申请中</span>
        <button @click="goCancel($route.query.orderId)" v-else>申请取消</button>
    </div>

  </div>
</template>

<script>

import { Toast } from 'vant'
import { getOrderDetail, CancelOrder } from '@/api/order'

export default {
  data () {
    return {
      order: {}
    }
  },
  async created () {
    const { data: { order } } = await getOrderDetail({ orderId: this.$route.query.orderId })
    this.order = order
  },
  methods: {
    async cancel (obj) {
      const { message } = await CancelOrder(obj)
      setTimeout(() => {
        Toast(message)
      }, 200)
      const { data: { order } } = await getOrderDetail({ orderId: this.$route.query.orderId })
      this.order = order
    },
    goCancel (orderId) {
      this.$dialog.confirm({
        title: '温馨提示',
        message: '确定要取消该订单吗'
      }).then(() => {
        this.cancel({ orderId })
      }).catch(() => {})
    }
  }

}
</script>

<style lang="less" scoped>

.order {
    padding-top: 46px;
    padding-bottom: 46px;
    overflow-y: auto;
}

.van-nav-bar {
    background-color: #e8c269;

    ::v-deep .van-nav-bar__title {
    font-weight: bold;
    color: white;
  }

    ::v-deep .van-icon-arrow-left {
        color: white;
    }
}

.header {
    width: 345px;
    height: 80px;
    padding: 0px 15px ;
    background-color: #e8c269;
    display: flex;
    align-content: center;
    align-items: center;

    img {
        width: 64px;
        height: 64px;
    }

    span {
        color: #fff;
        font-size: 19px;
        font-weight: 700;
        padding: 10px;
    }
}

.user {
    width: 328px;
    height: 45px;
    padding: 12px;
    margin: 0 auto;
    margin-top: 5px;
    background: white;
    font-size: 14px;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    border-radius: 10px;

    p:first-child {
        span {
            padding-right: 5px;
        }
    }

    p:last-child {
        color: #999;
        font-size: 12px;
    }
}

.goods {

    background: white;
    border-radius: 10px;
    width: 352px;
    margin: 10px auto 5px;

    .goods-item {
        height: 90px;
        width: 322px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        .left {
            height: 90px;
            width: 90px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .middle {
            width: 149px;

            p {
                line-height: 1.3;
                white-space: normal;
                color: #484848;
                font-size: 13px;
                display: -webkit-box;  /* 兼容旧版浏览器 */
                -webkit-line-clamp: 2;   /* 显示两行 */
                -webkit-box-orient: vertical;    /* 子元素在垂直方向排列 */
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .right {
            width: 75px;
            text-align: right;
            color: #777;
        }
    }
}

.info {
    width: 328px;
    height: 77px;
    padding: 12px;
    margin: 0 auto;
    margin-top: 10px;
    background: white;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    border-radius: 10px;
    font-size: 12px;

    span {
            padding-right: 10px;
        }

    span:nth-child(2n+1){
        color: #999;
    }

}

.money {
    width: 328px;
    height: 77px;
    padding: 12px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 20px;
    background: white;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    border-radius: 10px;
    font-size: 12px;

    p:first-child {
        display: flex;
        justify-content: space-between;

        span:first-child {
            color: #999;
        }
    }

     p:nth-child(2) {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        border-bottom: 1px solid #f1f1f1;

        span:first-child {
            color: #999;
        }
    }

    p:last-child {
        display: flex;
        justify-content: right;

        span:last-child {
            color: red;
        }
    }
}

.handle {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 46px;
    text-align: right;
    background-color: white;

    button {
        border-radius: 14px;
        padding: 5px 12px;
        font-size: 14px;
        color: #383838;
        text-align: center;
        border: 0.5px solid #a8a8a8;
        margin-top: 8px;
        margin-right: 12px;
        background-color: white;
    }

    span {
        font-size: 14px;
        color: #888;
        line-height: 46px;
        padding: 5px 15px;
    }
}

</style>
